<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>AlloyTeam|腾讯全端 AlloyTeam 团队</title>
  <meta name="keywords" content="AlloyTeam 前端 腾讯 腾讯前端">
  <meta name="description" content="腾讯全端AlloyTeam团队">
  <link rel="shortcut icon" href="./favicon.ico">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 主导航 -->
  <nav class="navbar navbar-dark navbar-expand-lg fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">
        <h1 class="logo">AlloyTeam</h1>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-collapse"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" href="javascript:;">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">博客</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">Github</a>
          </li>
          <li class="nav-item">
            <a class="nav-link hot" href="javascript:;">TWeb Conf</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">SuperStar</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="javascript:;">Web前端导航</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">关于</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div class="carousel slide" id="alloyCarousel" data-bs-ride="carousel" data-bs-interval="5000">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="0" class="active"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="1"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="2"></li>
      <li data-bs-target="#alloyCarousel" data-bs-slide-to="3"></li>
    </ol>
    <!-- Slides -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <a href="#">
          <div class="container hire-info">
            <p class="hire-name">腾讯AlloyTeam招聘Web+工程师<br>2023</p>
            <p class="hire-title">征不平凡的你</p>
          </div>
        </a>
      </div>
      <div class="carousel-item"></div>
      <div class="carousel-item">
        <a href="#">
          <div class="container item-info">
            <p class="title-name">Alloy前端周刊</p>
            <p class="title-desc">为您带来精彩有料的前端好文</p>
          </div>
        </a>
      </div>
      <div class="carousel-item">
        <a href="#">
          <div class="container item-info special">
            <p class="title-name">Omi</p>
            <p class="title-desc">开放现代的web组件化框架</p>
          </div>
        </a>
      </div>
    </div>
  </div>

  <!-- 版块（开源项目） -->
  <div class="container section project">
    <!-- 标题 -->
    <h2 class="title">OpenSource / 开源项目<small>种类众多的开源项目，让你爱不释手</small></h2>
    <div class="row items">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="omi">
          <img src="./assets/images/omi.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="alloyimage">
          <img src="./assets/images/alloyimage.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="alloytouch">
          <img src="./assets/images/alloytouch.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="#" class="soda">
          <img src="./assets/images/soda.png" alt="">
          <h3>OMI</h3>
          <p>开放现代的Web组件化框架</p>
        </a>
      </div>
    </div>
    <div class="more">
      <a href="#">更多开源 &gt;</a>
    </div>
  </div>

  <!-- 版块（作品） -->
  <section class="container section product">
    <!-- 标题 -->
    <h2 class="title">Product / 作品<small>新奇好玩的作品，让你欲罢不能</small></h2>
    <div class="row items">
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/codetank.jpg" alt="">
          </div>
          <p>Code Tank</p>
          <p>全世界首个Javascript程序员的在线编程对战游戏</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloyphoto.jpg" alt="">
          </div>
          <p>AlloyPhoto</p>
          <p>专业在线图像处理App</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloydesigner.png" alt="">
          </div>
          <p>AlloyDesigner</p>
          <p>新概念web开发工具</p>
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-lg-3">
        <a href="javascript:;" class="item">
          <div class="img-wrap">
            <img src="./assets/uploads/alloystick.jpg" alt="">
          </div>
          <p>AlloyStick</p>
          <p>HTML5骨骼动画引擎</p>
        </a>
      </div>
    </div>
    <div class="more">
      <a href="#">更多作品 &gt;</a>
    </div>
  </section>

  <!-- 版块（博客） -->
  <section class="container section blog">
    <!-- 标题 -->
    <h2 class="title">Blog / 博客<small>最新技术发展，业界前沿博客</small></h2>
    <div class="row items">
      <div class="col-lg-6">
        <div class="inner">
          <h3>最新博客 <a href="#">...</a></h3>
          <ul class="list-unstyled">
            <li>
              <a href="#">
                <h5>Web Worker 文献综述</h5>
                <span>TAT. cntchen</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>线程入门</h5>
                <span>TAT.vorshen</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践</h5>
                <span>TAT.Duang</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>脚本错误量极致优化-定位压缩且无 SourceMap 文件的脚本错误</h5>
                <span>TAT.joeyguo</span>
              </a>
            </li>
            <li>
              <a href="#">
                <h5>CSS Pixels</h5>
                <span>TAT.oliverzli</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="inner">
          <h3>博客分类 <a href="#">...</a></h3>
          <div class="row">
            <div class="type col-md-6">
              <img src="./assets/images/javascript.png" alt="">
              <p class="name">Javascript</p>
              <p class="brief">没看过这些，怎么敢说懂js</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/css.png" alt="">
              <p class="name">CSS</p>
              <p class="brief">神奇的CSS在哪里？</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/nodejs.png" alt="">
              <p class="name">Nodejs</p>
              <p class="brief">亿万级数据服务的秘密</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/mobile.png" alt="">
              <p class="name">移动Web开发</p>
              <p class="brief">PC转向移动，这是个问题</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/users.png" alt="">
              <p class="name">用户体验设计</p>
              <p class="brief">震惊！原来应用还可以这样设计</p>
            </div>
            <div class="type col-md-6">
              <img src="./assets/images/performance.png" alt="">
              <p class="name">Web性能优化</p>
              <p class="brief">丝般柔顺体验背后的真相</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 版块（超级明星） -->
  <section class="container section stars">
    <!-- 标题 -->
    <h2 class="title">SuperStar / 超级明星俱乐部<small>技术达人，最强大脑，前端先驱</small></h2>
    <div class="row items">
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/jetyu.jpg" alt="">
          </div>
          <h5>JetYu 于涛</h5>
          <p>AlloyTeam 创始人</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/dntzhang.jpg" alt="">
          </div>
          <h5>DntZhang 张磊</h5>
          <p>知名博主，多个开源框架作者</p>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="profile">
          <div class="img-wrap">
            <img src="./assets/uploads/dorsywang.jpg" alt="">
          </div>
          <h5>DorsyWang 王斌</h5>
          <p>数学达人，图像处理专家</p>
        </div>
      </div>
    </div>
    <div class="more">
      <a href="#">更多明星 ></a>
    </div>
  </section>

  <!-- 底部（版权、推广链接） -->
  <section class="footer">
    <div class="container">
      <div class="row">
        <div class="col-lg-5 webmeta">
          <img class="logo" src="./assets/images/logo.png" alt="">
          <h6 class="slogan">成为地球卓越的Web团队</h6>
          <p class="copyright">Copyright© 2023 AlloyTeam. All Rights Reserved.</p>
        </div>
        <div class="col-lg-2 d-none d-lg-block ">
          <h6 class="title">兄弟团队</h6>
          <a href="#">腾讯CDC</a>
          <a href="#">腾讯ISUX</a>
          <a href="#">腾讯TGideas</a>
          <a href="#">腾讯FERD</a>
          <a href="#">百度FEX</a>
          <a href="#">淘宝FED</a>
        </div>
        <div class="col-lg-2 d-none d-lg-block ">
          <h6 class="title">友情链接</h6>
          <a href="#">腾讯CDC</a>
          <a href="#">腾讯ISUX</a>
          <a href="#">腾讯TGideas</a>
          <a href="#">腾讯FERD</a>
          <a href="#">百度FEX</a>
          <a href="#">淘宝FED</a>
        </div>
        <div class="col-lg-3">
          <div class="row">
            <div class="col-md-6 col-xs-6 social">
              <img src="./assets/uploads/hm.jpg" alt="">
              <p>QQ群：162225981</p>
            </div>
            <div class="col-md-6 col-xs-6 social">
              <img src="./assets/uploads/hm.jpg" alt="">
              <p>微信公众号:AlloyTeam</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <script src="./js/bootstrap.min.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>